<template>
    <div class="container">
      <div class="box">
          <form autocomplete="off">
              <h2>Sign in</h2>
              <div class="inputBox">
                  <input type="text" v-model="user.username" required>
                  <span>UserName</span>
                  <i></i>
              </div>
              <div class="inputBox">
                  <input type="password" v-model="user.password" required>
                  <span>Password</span>
                  <i></i>
              </div>
              <div class="links">
                  <a href="#">Forgot Password ?</a>
                  <a href="/register">Signup</a>
              </div>
              <input type="button" @click="login" value="Login">
          </form>
      </div>
    </div>

  </template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { User } from '@/type/login'
import { Login } from '@/api/loginregister/login'
import { ElMessage } from 'element-plus'
export default {
  setup () {
    const Data = reactive(new User())
    const router = useRouter()
    const login = async () => {
      if (Data.user.username === '' || Data.user.password === '') {
        return ElMessage.warning('请按要求填写内容')
      }
      const { data: res } = await Login(Data.user.username, Data.user.password)
      if (res.code !== 200) return ElMessage.error('登录失败，请重试！')

      // 将token值存到本地
      localStorage.setItem('token', res.token)
      clean()
      router.push('/')
    }
    // 清空表单
    const clean = () => {
      Data.user = {
        username: '',
        password: ''
      }
    }
    return {
      ...toRefs(Data),
      login
    }
  }
}
</script>

<style  scoped>
/* 引入自定义的css样式 */
@import"@/assets/css/login.css"
</style>
